/*==========================================================
CHECKDEBT — Consulta de Documentos
============================================================

/* 1. VARIABLES DE COLOR
   Paleta semántica usada en todo el componente ------------------ */
:root {
    --color-primary: #051c6b;
    /* azul corporativo */
    --color-primary-mid: #2f408d;
    /* azul medio (gradientes) */
    --color-primary-light: #4859a6;
    /* azul claro (barra superior) */
    --color-accent: #ff6f16;
    /* naranja (botón) */
    --color-accent-opaque: #ff6f16c9;
    /* naranja semitransparente (hover) */
    --color-icon: #fff;
    /* blanco (ícono dentro del círculo) */
    --color-on-surface: #191c1d;
    /* casi negro (texto del input) */
    --color-muted: #757682;
    /* gris apagado (subtítulos, labels) */
    --color-border: rgba(198, 197, 211, 0.5);
    /* borde sutil */
}


/* 2. CONTENEDOR PRINCIPAL
   Centra la tarjeta vertical y horizontalmente ------------------ */
.checkdebt-wrapper {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 3. TARJETA
   Fondo vidrio esmerilado con sombra y barra de color arriba ---- */
.doc-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    border: none;
    box-shadow:
        8px 0 20px -8px rgba(5, 28, 107, 0.10),
        -8px 0 20px -8px rgba(5, 28, 107, 0.10),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    overflow: hidden;
    position: relative;
}

/* Barrita decorativa azul en el borde superior de la tarjeta */
.doc-card::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
}


/* 4. ÍCONO PRINCIPAL
   Círculo azul con ícono blanco + animación de pulso suave ------ */
.icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 20%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(5, 28, 107, 0.25);
    animation: soft-pulse 2.5s infinite;
}

/* Ícono Font Awesome dentro del círculo */
.icon-check-debt {
    color: var(--color-icon);
    font-size: 25px;
}

/* Animación: el contenedor "respira" con una sombra que se expande */
@keyframes soft-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(5, 28, 107, 0.20);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(5, 28, 107, 0.00);
    }

    100% {
        box-shadow: 0 0 0 0px rgba(5, 28, 107, 0.00);
    }
}


/* 5. TIPOGRAFÍA
   Título grande y subtítulo descriptivo ------------------------- */
.doc-title {
    font-weight: 800;
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.doc-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* 6. CAMPO DE ENTRADA
   Input con ícono decorativo a la izquierda --------------------- */
.input-wrap {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.25s, box-shadow 0.25s;
    display: flex;
    overflow: visible;
    position: relative;
}

/* Borde y sombra azul cuando el input tiene el foco */
.input-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(5, 28, 107, 0.12);
}

/* Ícono decorativo dentro del input (candado, documento, etc.) */
.input-icon {
    padding: 0 12px 0 16px;
    color: var(--color-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* El input en sí: sin bordes, hereda la fuente */
.input-wrap input,
.input-wrap select {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    padding: 14px 16px 14px 0;
    font-size: 1rem;
    color: var(--color-on-surface);
    width: 100%;
    /* flex: 1 + min-width: 0 son clave para que el <select> no se encoja
       al ancho de su contenido más largo dentro de un contenedor flex */
    flex: 1;
    min-width: 0;
    font-family: inherit;
}

/* Texto de placeholder en gris claro */
.input-wrap input::placeholder {
    color: rgba(117, 118, 130, 0.5);
}


/* NICE-SELECT FIX FOR CHECKDEBT */
.input-wrap .nice-select {
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 16px 14px 0;
    font-size: 1rem;
    color: var(--color-on-surface);
    flex: 1;
    min-width: 0;
    height: auto;
    line-height: normal;
    float: none;
    display: flex;
    align-items: center;
    /* Ancla el menú (.list) al .input-wrap en vez de a este select,
       para que el dropdown mida exactamente el ancho del campo completo */
    position: static;
}

.input-wrap .nice-select .current {
    font-weight: normal;
    color: var(--color-on-surface);
    margin-right: 20px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.input-wrap .nice-select::after {
    right: 16px;
    height: 6px;
    width: 6px;
}

.input-wrap .nice-select .list {
    width: 100%;
    /* 100% del .input-wrap = ancho exacto del campo cerrado */
    left: 0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(5, 28, 107, 0.15);
}

.input-wrap .nice-select .option {
    font-size: 0.95rem;
}

/* ── FIX FOUC: <select> nativo sin flecha nativa ── */
.input-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 28px;
    cursor: pointer;
    height: auto;
    line-height: normal;
}

/* Flecha <i> idéntica a .nice-select::after (bordes rotados 45°) */
.nice-select-arrow {
    display: block;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -4px;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Cuando nice-select ya transformó el select, oculta esta flecha */
.input-wrap .nice-select ~ .nice-select-arrow {
    display: none;
}

/* 7. BOTÓN DE ACCIÓN
   Botón naranja con flecha que se anima al hacer hover ---------- */
.btn-accent {
    background-color: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
}

/* Hover: sube 1px y se vuelve ligeramente transparente */
.btn-accent:hover {
    transform: translateY(-1px);
    background-color: var(--color-accent-opaque);
}

/* Estado deshabilitado — sin checkbox seleccionado */
.btn-accent:disabled,
.btn-accent.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* Hover: la flecha rebota de izquierda a derecha */
.btn-accent:hover .arrow-debt {
    animation: LoginArrowRight 0.8s ease-in-out infinite;
    transform: none;
}

/* Variante azul para botones de retorno */
.btn-accent-ret {
    background-color: var(--color-primary);
}

.btn-accent-ret:hover {
    background-color: var(--color-primary-mid);
}

/* La flecha se desplaza 8px a la derecha y vuelve */
@keyframes LoginArrowRight {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

/* 8. NOTA DE SEGURIDAD
   Texto pequeño con candado, debajo del botón ------------------- */
.security-note {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(117, 118, 130, 0.8);
    display: flex;
    align-items: center;
    gap: 6px;
}


/*============================================================
  12. CHECKDEBT — Resultados: Collapse, Toggle, Cuotas
  Estilos específicos de la vista results de credit-lookup
  ============================================================ */

/* 12.1 Toggle "Detalles" — div clickeable con flecha
   Se apoya en el atributo aria-expanded que Bootstrap actualiza
   automáticamente al expandir/colapsar --------------------------- */
.credit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(5, 28, 107, 0.06);
    transition: background 0.25s, color 0.25s;
    user-select: none;
    white-space: nowrap;
}

.credit-toggle:hover {
    background: rgba(5, 28, 107, 0.12);
    color: var(--color-primary-mid);
}

/* 12.2 Flecha del toggle — rota 180° cuando el collapse está abierto */
.credit-toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.credit-toggle[aria-expanded="true"] .credit-toggle-icon {
    transform: rotate(180deg);
}

/* Cuando está expandido, el toggle cambia ligeramente de tono */
.credit-toggle[aria-expanded="true"] {
    background: rgba(5, 28, 107, 0.10);
    color: var(--color-primary-mid);
}

/* 12.3 Panel expandido — contenido del collapse */
.collapse-panel {
    padding-top: 16px;
}

/* 12.4 Mensaje explicativo — caja informativa arriba de las cuotas */
.payment-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(5, 28, 107, 0.04);
    border: 1px solid rgba(5, 28, 107, 0.10);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: var(--color-muted);
    line-height: 1.5;
}

.payment-hint-icon {
    color: var(--color-primary);
    font-size: 1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* 12.5 Lista de cuotas — cada fila representa una cuota pagable */
.installment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.installment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--color-border);
    transition: border-color 0.25s, background 0.25s;
}

.installment-item:hover {
    border-color: rgba(5, 28, 107, 0.25);
    background: rgba(255, 255, 255, 0.95);
}

/* 12.6 Columna del checkbox */
.installment-check-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.installment-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
    margin: 0;
}

.installment-checkbox:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.installment-check-label {
    display: none;
}

/* 12.7 Columna del monto y etiquetas */
.installment-amount-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.installment-amount {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
}

.installment-initial-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.installment-mora-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

/* 12.8 Columna de la fecha */
.installment-date-col {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.installment-date-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-muted);
}

.installment-date-overdue {
    color: #dc3545;
}

.installment-date-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-on-surface);
}


/*============================================================
  13. ANIMACIÓN COLLAPSE — Solo para paneles .doc-card
  Sobrescribe display:none de Bootstrap con grid-template-rows
  para lograr deslizamiento + fundido al abrir/cerrar.
  No modifica nada del HTML ni del resto del CSS.
  ============================================================ */
.doc-card > .collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

.doc-card > .collapse > .collapse-panel {
    overflow: hidden;
    min-height: 0;
}

.doc-card > .collapse.show {
    grid-template-rows: 1fr;
    opacity: 1;
}